import QtQuick 1.0

Item {
    id: dialog

    default property alias children: content.children

    x: parent.width
    state: "hidden"

    function show()
    {
        dialog.state = "shown"
    }

    function hide()
    {
        dialog.state = "hidden"
    }

    Rectangle {
        id: blur
        width: parent.parent.width
        height: parent.parent.height
        x: 0
        y: 0
        color: "black"
        opacity: 0

        MouseArea {
            anchors.fill: parent
            onClicked: {
                hide()
            }
        }
    }

    BorderImage {
        anchors.fill: parent
        source: "gfx/dialog.png"

        border {
            left: 20
            right: 20
            top: 20
            bottom: 20
        }

        MouseArea {
            // Eat mouse events for the dialog area
            anchors.fill: parent
        }

        Item {
            // Host for dialog contents
            id: content
            anchors {
                fill: parent
                leftMargin: 15
                rightMargin: 15
                topMargin: 15
                bottomMargin: 15
            }
        }
    }

    states: [
        State {
            name: "hidden"
            PropertyChanges {target: dialog; x: parent.width}
        },
        State {
            name: "shown"
            PropertyChanges {target: blur; x: -(parent.parent.width - parent.width); opacity: 0.5 }
            PropertyChanges {target: dialog; x: parent.width - width}
        }

    ]

    transitions: [
        Transition {
            to: "shown"
            SequentialAnimation {
                PropertyAnimation { target: dialog; property: "x"; duration: 200 ; easing.type: Easing.InOutCubic }
                PropertyAnimation { target: blur; property: "x"; duration: 0 }
                PropertyAnimation { target: blur; property: "opacity"; duration: 200 }
            }
        },
        Transition {
            to: "hidden"
            SequentialAnimation {
                PropertyAnimation { target: blur; property: "opacity"; duration: 200 }
                PropertyAnimation { target: dialog; property: "x"; duration: 200 ; easing.type: Easing.InOutCubic }
                PropertyAnimation { target: blur; property: "x"; duration: 0 }
            }
        }
    ]
}
